<template>
  <div class="FileUpload">
    <n-upload :accept="acceptTypes" :show-file-list="false" :custom-request="handleUpload" abstract>
      <div class="flex items-center">
        <n-upload-trigger #="{ handleClick }" abstract>
          <n-button
            :class="[appStore.isDeep ? 'bg-#062a5f color-#2BA1FF' : 'bg-#FFF']"
            :loading="data.loading"
            :disabled="fileList.length >= limit"
            @click="handleClick"
          >
            <n-icon size="16" :component="FileUploadOutlined" style="margin-right: 4px"></n-icon>
            上传文件
          </n-button>
        </n-upload-trigger>

        <div
          :class="[
            'pointer-events-none ml-12 text-12',
            appStore.isDeep ? 'color-#FFFFFF66' : 'color-gray',
          ]"
        >
          可上传{{ acceptText }}格式文件，单个文件不超过{{ fileSize }}M
        </div>
      </div>
    </n-upload>

    <div
      v-for="(item, index) in fileList"
      :key="index"
      :class="[
        'file-item mt-10 h-24 w-240 flex items-center justify-between pr-16 text-12',
        appStore.isDeep ? 'color-#51E6FB' : 'color-#6D61E3 rounded-6',
      ]"
    >
      <img :src="appStore.fileLinkImg" class="mr-4" />
      <n-ellipsis class="mr-10 flex-1">
        {{ item.fileOriginalName }}
      </n-ellipsis>
      <n-icon
        class="close flex-shrink-0 cursor-pointer"
        size="16"
        :component="CloseFilled"
        :color="appStore.isDeep ? '#51E6FB' : '#030712'"
        @click="handleRemove(index)"
      ></n-icon>
    </div>
  </div>
</template>
<script setup lang="jsx">
import { useAppStore } from '@/store'
import FileUploadOutlined from '@vicons/material/FileUploadOutlined'
import CloseFilled from '@vicons/material/CloseFilled'
import * as fileApi from '@/api/file'
import { computed } from 'vue'
defineOptions({ name: 'FileUpload' })
const appStore = useAppStore()
const fileList = defineModel({
  type: Array,
  default: () => [],
})
const props = defineProps({
  accept: {
    type: Array,
    default: () => ['jpg', 'png', 'doc', 'docx', 'xls', 'xlsx', 'pdf', 'ppt', 'pptx', 'mp3', 'mp4'],
  },
  fileSize: {
    type: Number,
    default: 200,
  },
  limit: {
    type: Number,
    default: 1,
  },
  color: {
    type: String,
    default: '#f3f5f8',
  },
  customRequest: {
    type: Function,
    default: null,
  },
})
const acceptTypes = computed(() => props.accept.map((item) => `.${item}`).join(','))
const acceptText = computed(() => props.accept.join('/'))
const fileSizeByte = computed(() => 2 ** 20 * props.fileSize)
const data = reactive({
  loading: false,
  percentage: 0,
})
function handleUpload(params) {
  const { file, onFinish, onError } = params
  if (file.file.size > fileSizeByte.value) {
    $message.warning(`单个文件不能超过${props.fileSize}M!`)
    return false
  }
  if (typeof props.customRequest === 'function') {
    props.customRequest(params)
    return
  }
  data.loading = true
  fileApi
    .upload(file.file)
    .then((res) => {
      fileList.value.push({ fileUrl: res.data, fileOriginalName: file.name })
      onFinish()
    })
    .catch((err) => {
      console.log(err)
      onError()
    })
    .finally(() => {
      data.loading = false
    })
}
function handleRemove(index) {
  fileList.value.splice(index, 1)
}
const activeBg = computed(() =>
  appStore.isDeep ? 'rgba(81,230,251,0.1)' : 'rgba(109, 97, 227, 0.05)'
)
</script>
<style lang="scss" scoped>
.file-item {
  padding-left: 16px;
  .close {
    opacity: 0;
  }
  &:hover {
    background: v-bind('activeBg');

    .close {
      opacity: 1;
    }
  }
}
</style>
